<template>
  <div class="help_modal" >
    <div class="help_arae">
      <div class="help_header">
        <image v-if="imgUrl!=''" class="help_header_img" :mode="'scaleToFill'" :src="imgUrl"></image>
      </div>
      <div class="help_content">
        <div class="help_header_icon">
          <image class="help_header_icon_img" :mode="'scaleToFill'" :src="pageData.avatar"></image>
<!--          <image class="help_header_icon_img" :mode="'scaleToFill'"></image>-->
        </div>
        <div class="help_content_word">
          <!-- 他正在参与竞猜领红包活动 快来帮他助力，赢现金大奖 -->{{pageData.text}}
        </div>
        <div class="help_button" @click="handlerConfirm" :class="{'new_year_bg':skinType==6}">{{btnText}}</div>
      </div>
      <div class="help_close" @click="hideModal()">
        <image class="button_img"  :mode="'scaleToFill'" src="~@/static/sports/pour_close.png"></image>
      </div>
    </div>
  </div>
</template>

<script>
import {taskInvite,taskFinished} from '@/api/api.js'
import {checkLogin,LoginApp,checkPlatform,proxyShareFun,isWeiXin,isQianfan,checkImage} from '@/until/QFH5.js'
import {mapGetters} from 'vuex'
// #ifdef H5
	const wxModule = require('jweixin-module')
	// #endif
export default {
  name: "help",
  computed:{
	  btnText(){
		  if(this.pageData.type==12)return '接受邀请'
		  if(this.pageData.type==13)return '为TA助力'
	  },
	...mapGetters(['siteinfo','activityType','activityName','skinType','guide'])
	
  },
  props:{
	  data:{
		require:true
	  }
  },
  data(){
    return{
		pageData:{},
		shareData:null,
		tid:'',
		invite:'',
		imgUrl:'',
		sock:false
    }
  },
  methods:{
    hideModal(){
	  this.resetShareFun()
	  console.log('关闭help')
      this.$emit('hideMissionModal')
    },
	handlerConfirm(){
		//需要判断登录
		this.taskFinish(null,this.invite)
	},
	checkPlat(){
		let plat = checkPlatform()
		if(!plat){
			this.$store.dispatch('setGuideShow',4)
		}
		return plat
	},
	login(){
	  if(this.checkPlat()){
	    LoginApp(this.actid)
	  }
	},
	//完成任务
	async taskFinish(callback = () => {}, Invite = null) {
		let loginStatus = await checkLogin()
		if(!loginStatus){
		  this.hideModal()
		  this.login()
		  return
		}
		if(isQianfan()){
			let {isWechat,phone} = this.guide
			if(!isWechat){
				this.$store.dispatch('setGuideShow',1)
				return 
			}
			if(phone==""){
				this.$store.dispatch('setGuideShow',2)
				return 
			}
		}
		if(this.sock){
			uni.showToast({
					title:'请勿重复点击',
					icon:'none',
					duration:3000
				})
			return
		}
		this.sock = true
		taskFinished({ tid: this.tid, invite: Invite }).then(res => {
			if (res.code == 0 && res.data.length == 0) {
				let str = this.pageData.type==13?'助力成功':'邀请成功'
				uni.showToast({
					title:str,
					icon:'none',
					duration:3000
				})
				this.hideModal()
			}else{
				uni.showToast({
					title:res.text,
					icon:'none',
					duration:3000
				})
				this.resetShareFun()
			}
			this.sock = false
		})
	},
	//恢复分享信息
	resetShareFun(){
		let actid = uni.getStorageSync('actid')
		let {title,desc,image} = this.shareData
		let url = window.location.origin+window.location.pathname + '?type='+this.activityType+'&plugin='+this.activityName+'&id='+actid
		console.log('重新设置',title,desc,image,url)
		if(isWeiXin()){
			let domain = this.$store.state.siteinfo.main_hd_domian
			let newUrl =  domain ? domain + '/site/redirect?path=' + encodeURIComponent(url): url
			this.setWechatShare(title,desc,image,newUrl)
			return
		}
		proxyShareFun(title,image,desc,url)
	},
	setWechatShare(title,desc,imgUrl,link){
		//四个参数均不能为空  否則會失敗
		wxModule.onMenuShareAppMessage({
			title: title,
			desc: desc,
			link: link,
			imgUrl: imgUrl,
		})
		wxModule.onMenuShareTimeline({
			title: title,
			desc: desc,
			link: link,
			imgUrl: imgUrl,
		})
		wxModule.updateAppMessageShareData({
			title: title,
			desc: desc,
			link: link,
			imgUrl: imgUrl,
		})
		wxModule.updateTimelineShareData({
			title: title,
			desc: desc,
			link: link,
			imgUrl: imgUrl,
		})
	},
	init(){
		// taskInvite()
		let actid = uni.getStorageSync('actid') || 0
		this.invite = uni.getStorageSync(actid+'Invite') || 0
		this.tid = uni.getStorageSync(actid+'Tid') || 0
		taskInvite({actid:actid,tid:this.tid,invite:this.invite}).then(res=>{
			console.log('11111111',res)
			if(res.code==0){
				this.pageData = res.data
				
				// if(this.skinType==6){
				// 	if(this.pageData.type==13)
				// 		this.imgUrl = require('@/static/sports/guess_header_new_year.png')
				// 	if(this.pageData.type==12)
				// 		this.imgUrl = require('@/static/sports/help_new.png')
				// }
				this.imgUrl =checkImage(1,res.data.banner)
				// console.log(res.data.banner,this.imgUrl)
			}
		})
	}
  },
  mounted() {
	  
	  
	  this.init()
	  
  },
  watch:{
	  data: {
	  	handler(newVal, oldVal) {
	  		if (newVal) {
	  			this.shareData = newVal
				console.log('設置shareData',this.shareData)
	  		}
	  	},
	  	deep: true,
	  	immediate:true
	  },
  }
}
</script>

<style scoped lang="scss">
@import '~@/common/common.scss';
.help_modal{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 99;
  .help_arae{
    width: 640rpx;
    @include center;
    top: 45%;
    .help_header{
      width: 100%;
      height: 260rpx;
      margin: -5rpx 0 0 0;
      .help_header_img{
        width: 100%;
        height: 100%;
      }
    }
    .help_content{
      width: 100%;
      background: #FFFFFF;
      box-shadow: 0px 3px 10px 1px rgba(0,0,0,0.2);
      border-radius: 30rpx;
      padding: 1rpx;
      position: relative;
      .help_header_icon{
        width: 120rpx;
        height: 120rpx;
        @include center;
        top: 3%;
        .help_header_icon_img{
          width: 100%;
          height: 100%;
          background: #eee;
          border-radius: 50%;

        }
      }
      .help_content_word{
        margin: 90rpx 130rpx 50rpx 130rpx;
        font-size: 30rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #222222;
      }
      .help_button{
        width: 400rpx;
        height: 80rpx;
        line-height: 80rpx;
        margin: 30rpx auto 60rpx auto;
        background: rgba(255, 61, 81, 1);
        border-radius: 40rpx;
        text-align: center;
        font-size: 34rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #FFFFFF;
      }
	  .new_year_bg{
		  background-color: #FF332E;
	  }
    }
    .help_close{
      margin: 40rpx auto;
      width: 70rpx;
      height: 70rpx;
      .button_img{
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>